<template>
	<div class="box">
		<div class="login">
			<h1 style="color: white;margin-bottom: 2rem;">焦作师专新闻系统登录</h1>
			<div>
				<el-row style="margin-bottom: 2rem;">
					<el-input v-model="user.userName"  placeholder="请输入账号" :prefix-icon="User" />
				</el-row>
				<el-row style="margin-bottom: 2rem;">
					<el-input v-model="user.password" show-password  placeholder="请输入密码" :prefix-icon="Lock" />
				</el-row>
			</div>
			<div>
				<el-button @click="login()">登录</el-button>
				<el-button @click="registry()">注册</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	//引入图标
	import {User,Lock} from '@element-plus/icons-vue'
	//引入axios
	import axios from 'axios'
	//配置基本路径
	axios.defaults.baseURL='/api'
	//引入store
	import { store } from '../../store.js'
	//引入消息框
	import { ElMessage } from 'element-plus'
	
	export default{
		data() {
			return {
				//绑定表单数据
				user:{
					userName:'',
					password:''
				},
				store
			}
		},
		setup() {
			return{
				//初始化图标
				User,Lock
			}
		},
		methods:{
			//登录按钮点击事件
			login(){
				axios.get('/user/login',{
					params:this.user
				})
				.then(response => {
					//console.log(response)
					if(response.data){
						//登录成功，存储用户信息
						this.store.user = response.data
						//跳转到首页
						this.$router.push('/')
					}else{
						ElMessage.error('用户名或密码错误！')
					}
				})
			},
			//注册按钮点击事件
			registry(){
				this.$router.push('/registry')
			}
		}
	}
</script>

<style>
	.box {
		height: 100%;
		background-color: #034f8a;
		position: relative;
	}
	.login{
		width: 15%;
		text-align: center;
		position: absolute;
		top: 25%;
		left: 60%;
	}
</style>